<template>
	<view>
		<view :style="{height:CustomBarRpx+'rpx'}"> </view>
		<view class="header-view" >
			<view class="user-card">
				<view class="user-card-0" v-if="isLogin">
					<view class="uc0-pic">
						<image :src="userInfo.image" mode=""></image>
					</view>
					<view class="uc0-name">
						<view class="uc0-name-0">{{ userInfo.nickname }}</view>
						<view class="uc0-name-1">
							Id：{{ userInfo.id }}
							<view class="copyText" @click="copyText(userInfo.id)">
								{{ $t('复制') }}
							</view>
						</view>
					</view>
					<view class="uc0-edit"  @click="gotoUser">{{ $t('编辑资料') }}</view>
				</view>
				<view class="user-card-0" v-if="!isLogin" @click.stop="$.to('/pagesB/pages/my/login')">
					<view class="uc0-pic">
						<image src="https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01Hd1yTg2JfEt36ZLP7_!!2215984279448.png" mode=""></image>
					</view>
					<view class="uc0-name">
						<view class="uc0-name-0">{{ $t('未登录') }}</view>
						<view class="uc0-name-1">
							Id：--
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="other-view">
			<view class="other-view-0" @click="$.to('/pagesA/pages/my/currency?sta=2')">
				<view class="other-view-img">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/d3747bf690c2cf8edd168d04e0d6a95e.png" mode=""></image>
				</view>
				<view class="other-view-right">
					<text class="other-view-right-0">{{ $t('糯米值') }}</text>
					<text class="other-view-right-1">{{ userInfo.integral ? userInfo.integral : 0 }}</text>
				</view>
			</view>
			<view class="other-view-1"  @click="$.to('/pagesA/pages/my/currency?sta=3')">
				<view class="other-view-img">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/1ca3fe1d937cea11f7efe06212395184.png" mode=""></image>
				</view>
				<view class="other-view-right">
					<text class="other-view-right-0">{{ $t('芝麻粒') }}</text>
					<text class="other-view-right-1">{{ userInfo.integral2 ? userInfo.integral2 : 0 }}</text>
				</view>
			</view>
			<view class="other-view-2" @click="$.to('/pagesA/pages/my/coupon')">
				<view class="other-view-img">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/c82176b10ee1006596beb39338e3f141.png" mode=""></image>
				</view>
				<view class="other-view-right">
					<text class="other-view-right-0">{{ $t('优惠券') }}</text>
					<text class="other-view-right-1">{{ $t('查看优惠券') }}</text>
				</view>
			</view>
		</view>
		<u-gap height="30"></u-gap>
		<view class="order-view">
			<view class="order-view-title" @click="$.to('/pagesA/pages/my/order?idx=0')">
				<text>{{$t('我的订单')}}</text>
				<u-icon name="arrow-right" size="24rpx"></u-icon>
			</view>
			<view class="order-status">
				<view class="order-status-tab" @click="$.to('/pagesA/pages/my/order?idx=0')">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/09f56eb26f091e6c335a91a2c1e8f1ff.png" mode="aspectFit"></image>
					<text>{{$t('全部')}}</text>
				</view>
				<view class="order-status-tab" @click="$.to('/pagesA/pages/my/order?idx=1')">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/2637ee5f198dac500a66a3fa203f6394.png" mode="aspectFit"></image>
					<text>{{$t('待发货')}}</text>
				</view>
				<view class="order-status-tab" @click="$.to('/pagesA/pages/my/order?idx=2')">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/06c583ded9b9ba4d1943b44ddcf17b71.png" mode="aspectFit"></image>
					<text>{{$t('待收货')}}</text>
				</view>
				<view class="order-status-tab" @click="$.to('/pagesA/pages/my/order?idx=3')">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/1a81299d7e33791fbc7788252094aff1.png" mode="aspectFit"></image>
					<text>{{$t('已完成')}}</text>
				</view>
			</view>
		</view>
<!-- 		<view class="activity-view"  @click="$.to('/pagesA/pages/my/activityPgae')">
			<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/07d8fe9340be5fd337f340dbe2a00b68.png" mode="aspectFill"></image>
		</view> -->
		<u-gap height="30"></u-gap>
		<view class="order-view serve">
			<view class="order-view-title">
				<text>{{$t('常用功能')}}</text>
			</view>
			<view class="order-status">
<!-- 				<view class="order-status-tab" @click="$.to('/pagesA/pages/my/myTeam')">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/b53fb52a91cff010d61c593fdba3cf74.png" mode="aspectFit"></image>
					<text>{{ $t('团队管理') }}</text>
				</view> -->
				<view class="order-status-tab"  @click="$.to('/pagesA/pages/my/qiandao')">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/9235a17151e093260326adabbd806428.png" mode=""></image>
					<text>{{$t('签到有奖')}}</text>
				</view>
				<view class="order-status-tab"  @click="$.to('/pagesA/pages/my/address')">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/bb347c12d88bab269ccd80c7aaa4734d.png" mode="aspectFit"></image>
					<text>{{$t('收货地址')}}</text>
				</view>
<!-- 				<view class="order-status-tab" @click="$.to('/pagesA/pages/my/activityPgae')">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/5983cbd29bd22d7a9353e13185f69430.png" mode="aspectFit"></image>
					<text>{{$t('邀请有奖')}}</text>
				</view> -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="order-status-tab" @click="lxkefu">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/85e1dbdc669e5370f6b3b59c5f5cb507.png" mode=""></image>
					<text>{{$t('联系客服')}}</text>
				</view>
				<!-- #endif -->
				
				<!-- #ifdef MP-WEIXIN -->
				<button class="order-status-tab order-status-tab-btn" open-type="contact">
				  <image src="https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01fXQDrI2JfEt1qGyta_!!2215984279448.png" mode=""></image>
				 <text>{{$t('联系客服')}}</text>
				</button>
				<!-- #endif -->
				<view class="order-status-tab"  @click="sdkshow = true">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/e00b35f8dad0e5a2fe73e7df90a1d3f4.png" mode=""></image>
					<text>{{$t('礼包码')}}</text>
				</view>
				
			</view>
<!-- 			<view class="order-status">
				<view class="order-status-tab" @click="$.to('/pagesA/pages/my/my_popularize')">
					<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240906/494b3052e5c906ee1e39ce4edd832171.png" mode=""></image>
					<text>{{$t('我的推广')}}</text>
				</view>
				
				
				
				
			</view> -->
		</view>
		
		<u-popup v-model="sdkshow" mode="center" border-radius="16">
		  <view class="cdkbox">
		    <view class="tit">{{$t('礼包码')}}</view>
		    <u-input
				:custom-style="{color:'#333'}"
		      v-model="sdk"
		      input-align="center"
		      :border="true"
		      placeholder="请输入礼包码"
		    />
		    <button @click="duihuan">{{$t('确定')}}</button>
		  </view>
		</u-popup>
		
		<kefu :isShow="kfshow" ref="child" @cusEvent="hide"></kefu>
		
		<u-tabbar v-model="current" height="56px" :border-top="false" bg-color="#fff" inactive-color="#666"
			active-color="#37003F" :list="tabbar" ></u-tabbar>
	</view>
</template>

<script>
	import kefu from '@/components/kefu.vue'
	import {
		tabbar
	} from '@/common/tabbar.js'
	export default {
		data() {
			return {
				current: 5,
				tabbar: tabbar,
				codeText: '',
				background: {
					backgroundColor: ''
				},
				isLogin: false,
				userInfo: {},
				sdkshow: false,
				sdk: '',
				count: 0, //消息角标
				kfshow: false,
				jiaoBiao: '',
				showBindTel: false, // 是否展示绑定手机号
				Bind: {
					phone: '',
					num: ''
				}
			}
		},
		components: {
			kefu
		},
		onLoad() {
			uni.$on('updataUser', () => {
				if (uni.getStorageSync('user')) {
					this.getUser()
				} else {
					this.userInfo = {}
					this.getLogin()
				}
			})
		},
		onShow() {
			this.getLogin()
			let userInfo = uni.getStorageSync('user')
			if (uni.getStorageSync('user')) {
				this.getUser()
				this.getNum()
				if (!userInfo.mobile) {
					this.showBindTel = true
				}
			}
		},
		onUnload() {
			uni.$off('updataUser')
		},
		methods: {
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (this.$tip.phoneReg.test(this.Bind.phone) == false) {
						this.$tip.tip('请填写正确的手机号')
						return
					}
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http({
						url: "api/login/send_sms",
						data: {
							event: 'login',
							mobile: this.Bind.phone
						}
					}).then(res => {
						if (res.data.code == 1) {
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							this.$tip.tip(res.data.msg)
						}
					}).catch(err => {});
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			// 点击复制
			copyText(data) {
				console.log("123456");
				uni.setClipboardData({
					data: data.toString(),
					success: () => {
						this.$tip.tip('复制成功')
					},
					fail: (e) => {
						console.log(e);
						this.$tip.tip('复制失败')
					},
				});
			},
			bindTel() {
				this.$http({
					url: "api/member/bind_mobile",
					data: {
						mobile: this.Bind.phone,
						code: this.Bind.num
					}
				}).then(res => {
					if (res.data.code == 1) {
						let userInfo = uni.getStorageSync('user')
						userInfo.mobile = this.Bind.phone
						uni.setStorageSync('user', userInfo);
						uni.setStorageSync('is_animation', userInfo.is_animation)
						this.$u.toast('绑定成功');
						this.showBindTel = false
					} else {
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			gotoUser() {
				uni.navigateTo({
					url: '/pagesA/pages/my/userInfo'
				})
			},
			//获取各类订单状态数字
			getNum() {
				this.$http({
						url: 'api/order/get_order_status_count'
					})
					.then((res) => {
						console.log(res, '角标')
						if (res.data.code == 1) {
							var data = res.data.data
							this.jiaoBiao = {
								dfh: data.dfh,
								yfh: data.dsh
							}
						}
					})
					.catch((err) => {})
			},
			hide() {
				this.kfshow = false
			},
			// 联系客服
			lxkefu() {
				this.$refs.child.getKf()
				this.kfshow = true
			},
			// 礼包码转换
			duihuan() {
				if (this.sdk == '') {
					this.$tip.tip('请填写兑换码')
					return
				}
				this.$http({
						url: 'api/member/cdkey',
						data: {
							kahao: this.sdk
						}
					})
					.then((res) => {
						console.log(res)
						if (res.data.code == 1) {
							this.$tip.tip(res.data.msg)
							this.sdkshow = false
							this.getUser()
						} else {
							this.$tip.tip(res.data.msg)
						}
					})
					.catch((err) => {})
			},
			getLogin() {
				if (uni.getStorageSync('user')) {
					this.isLogin = true
				} else {
					this.isLogin = false
				}
			},
			getUser() {
				if (!uni.getStorageSync('user')) {
					return
				}
				this.$http({
						url: 'api/member/get_user_info'
					}).then((res) => {
						console.log(res)
						if (res.data.code == 1) {
							this.getLogin()
							this.userInfo = res.data.data
							uni.setStorageSync('user', res.data.data)
							uni.setStorageSync('is_animation', res.data.data.is_animation)
						}
					}).catch((err) => {})
			},
			sc() {
				uni.switchTab({
					url: '/pages/tabBar/mall'
				})
				// setTimeout(() => {
				// 	uni.$emit('sc', 0)
				// }, 300)
			},
			mh() {
				uni.switchTab({
					url: '/pages/tabBar/cangku'
				})
				setTimeout(() => {
					uni.$emit('sc', 0)
				}, 300)
			}
		}
	}
</script>

<style>
	page {
		background: #f2fafc url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240905/ef044002e484978c199820dd1427182b.jpg") no-repeat top center;
		background-size: 100% auto;
	}
</style>

<style lang="scss" scope>
	.header-view {
		.top-view {
			display: flex;
			box-sizing: border-box;
			background: transparent;
			width: 100%;
			z-index: 999;
			.sub-view {
				width: 100%;
				align-items: center;
				display: flex;
				justify-content: space-between;
				padding: 0rpx 32rpx 0rpx 32rpx;
				height: 88rpx;
				box-sizing: border-box;
			}

			.sub-view-left,
			.sub-view-right {
				width: 100rpx;
			}

			.sub-view-right {
				display: flex;
				justify-content: flex-end;
			}

			.sub-view-center {
				color: #fff;

				image {
					width: 180rpx;
					height: 44rpx;
				}
			}
		}
		.user-card {
			padding: 20rpx 30rpx;
			box-sizing: border-box;
		}

		.user-card-0 {
			display: flex;
			align-items: center;
			.uc0-pic {
				width: 160rpx;
				height: 160rpx;
				// background-color: red;
				border-radius: 50%;
				overflow: hidden;
				flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.uc0-name {
				margin-left: 20rpx;
				width: 100%;
				padding: 30rpx 0;
				&-0 {
					color: #070820;
					font-size: 32rpx;
				}

				&-1 {
					color: #999;
					font-size: 22rpx;
					margin-top: 20rpx;
					display: flex;
					align-items: center;
				}

				.copyText {
					padding: 0.5px 5px;
					background-color: #876AF2;
					color: #fff;
					margin-left: 11px;
					border-radius: 2px;
				}
			}

			.uc0-edit {
				font-size: 26rpx;
				width: 180rpx;
				height: 60rpx;
				border-radius: 10px;
				font-weight: 400;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				flex-shrink: 0;
				position: relative;
				background-image: linear-gradient(to right,#be9cf9, #876af2);
			}
		}

		.user-card-1 {
			color: #00fdeb;
			font-size: 26rpx;
			font-weight: bold;
			margin-top: 30rpx;
			padding-left: 20rpx;
		}

		.user-card-2 {
			color: #00fdeb;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;

			.card-small {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-shrink: 0;

				.card-small-data {
					font-size: 24rpx;
					font-weight: 400;
				}

				.card-small-label {
					font-size: 22rpx;
					font-weight: 400;
					margin-top: 10rpx;
				}
			}

			.card-small-btn {
				width: 160rpx;
				height: 60rpx;
				flex-shrink: 0;
				background-image: url('https://img.alicdn.com/imgextra/i3/2215984279448/O1CN01Jc69lY2JfEt2sFHdt_!!2215984279448.png');
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
			}
		}
	}

	.other-view {
		width: 710rpx;
		padding: 30rpx 0;
		box-sizing: border-box;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		border-radius: 20rpx;

		&-0,
		&-1,
		&-2 {
			color: #00fdeb;
			display: flex;
			width: calc(710rpx / 3);
			height: 100%;
			flex-shrink: 0;
			justify-content: center;
			align-items: center;
			position: relative;
			z-index: 2;
			.other-view-img {
				width: 60rpx;
				height:60rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.other-view-right {

				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				font-weight: 400;

				.other-view-right-0 {
					color: #37003F;
					font-size: 22rpx;
				}

				.other-view-right-1 {
					color: #37003F;
					font-size: 20rpx;
					margin-top: 6rpx;
				}
			}
		}
		
		// &-0 {
		// 	border-right: 1rpx solid #00fdeb;
		// }
		&-1 {
			border-left: 1rpx solid #e2e3fe;
			border-right: 1rpx solid #e2e3fe;
		}
	}

	.other-view {
		position: relative;
	}

	.order-view {
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		margin: 0 30rpx;
		padding-bottom: 20rpx;
		background: #fff;
		border-radius: 30rpx;
		.order-view-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #37003F;
			font-size: 28rpx;
		}

		.order-status {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			padding-bottom: 10rpx;
            position: relative;
			z-index: 2;
			.order-status-tab {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 110rpx;
				image {
					width:42rpx;
					height:42rpx;
				}

				text {
					font-size: 24rpx;
					margin-top: 8rpx;
					color: #666;
				}
			}
		}
	}
	.cdkbox {
	  width: 500rpx;
	  background-color: #fff;
	  padding: 30rpx;
	  box-sizing: border-box;
	
	  .tit {
	    text-align: center;
		color: #000;
	    margin-bottom: 35rpx;
	  }
	
	  .inp {
	    border-radius: 16rpx;
	    border: 1rpx solid #333;
	    height: 60rpx;
	  }
	
	  button {
	    border-radius: 8rpx;
	    color: #fff;
	    background-image: linear-gradient(to right, #a7a7f8, #8970f0);
	    height: 70rpx;
	    line-height: 70rpx;
	    margin-top: 25rpx;
	    font-size: 28rpx;
	  }
	}
	.order-status-tab-btn{
		background: none;
		margin: 0;
		padding: 0;
		width: 100rpx;
		text{
			height: 32rpx;
			line-height: 32rpx;
		}
		&::after{
			border: none;
		}
	}
	.activity-view{
		margin: 0 30rpx;
		margin-top: 30rpx;
		height:200rpx;
		border-radius: 30rpx;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}
	
</style>